<template>
    <!-- NSpace 用于将两个菜单左右对齐并且使之响应式 -->
    <NSpace justify="space-between" style="background-color: rgba(255,255,255,1);">
        <NMenu :options="menuOptions1" mode="horizontal" />
        <NMenu :options="menuOptions2" mode="horizontal" responsive />
    </NSpace>
</template>

<script setup lang="ts">
//vue相关
import type { Component } from 'vue'
import { RouterLink } from 'vue-router'
import { h, ref, computed } from "vue";
//naiveui相关
import { NMenu, NSpace, NIcon } from "naive-ui";
import {
    SchoolOutline
} from '@vicons/ionicons5'

//导入登录状态全局变量。
import { loginStatus } from '@/stores/counter'
const login_status = loginStatus();

//包装响应式变量。
const isLogin = computed(() => {
    return login_status.isLogin;
});
const isNotLogin = computed(() => {
    return !isLogin.value;
})

//图标渲染，相当于返回一个dom
function renderIcon(icon: Component) {
    return () => h(NIcon, null, { default: () => h(icon) })
}

//左侧菜单
const menuOptions1 = [
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'home',
                    }
                },
                { default: () => '学生个性化成长平台' }
            ),
        icon: renderIcon(SchoolOutline),
        key: 'home',
    },
]

//右侧菜单
const menuOptions2 = ref([
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'home',
                    }
                },
                { default: () => '主页' }
            ),
        key: 'home',
    },

    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'map',
                    }
                },
                { default: () => '学习路线' }
            ),
        key: 'map',
    },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'direction',
                    }
                },
                { default: () => '参考项目' }
            ),
        key: 'srt_reference',
    },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'learn',
                    }
                },
                { default: () => '学习' }
            ),
        key: 'learn',
        children: [
            {
                label: () =>
                    h(
                        RouterLink,
                        {
                            to: {
                                name: 'learn',
                                params: { type: "article" }
                            }
                        },
                        { default: () => '文章' }
                    ),
                key: 'article'
            },
            {
                label: () =>
                    h(
                        RouterLink,
                        {
                            to: {
                                name: 'learn',
                                params: { type: "video" }
                            }
                        },
                        { default: () => '视频' }
                    ),
                key: 'video'
            }
        ]
    },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'blog',
                    }
                },
                { default: () => '博文' }
            ),
        key: 'blog'
    },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'qa',
                    }
                },
                { default: () => '问答' }
            ),
        key: 'qa',
        children: [
            {
                label: () =>
                    h(
                        RouterLink,
                        {
                            to: {
                                name: 'qa',
                                params: { type: "all" }
                            }
                        },
                        { default: () => '全部问答' }
                    ),
                key: 'allqa'
            },
            {
                label: () =>
                    h(
                        RouterLink,
                        {
                            to: {
                                name: 'qa',
                                params: { type: "my" }
                            }
                        },
                        { default: () => '我的问答' }
                    ),
                key: 'myqa'
            },
            {
                label: () =>
                    h(
                        RouterLink,
                        {
                            to: {
                                name: 'qa',
                                params: { type: "post" }
                            }
                        },
                        { default: () => '提问' }
                    ),
                key: 'postqa'
            },
        ]
    },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'login',
                    }
                },
                { default: () => '登录/注册' }
            ),
        key: 'login',
        show: isNotLogin
    },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'user',
                    }
                },
                { default: () => '个人中心' }
            ),
        key: 'user',
        show: isLogin
    },
])
</script>
